<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>

	<view class="result-content">
		<view class="table-th flex-row-center">
			<view class="th-left flex-row-center">
				<text class="text No-box">排名</text>
				<text class="text user-box">用户</text>
			</view>
			<view class="th-right flex-row-center">
				<text class="text textRight points-box">积分</text>
				<!-- <text class="text edit-box">操作</text> -->
			</view>
		</view>
		<template v-if="ranksInfo.list.length>0">
			<view class="tbody-box flex-row-center" v-for="(item,index) in ranksInfo.list" :key="index">
				<view class="flex-row-center">
					<view class="No-box flex-center">
						<template v-if="item.ranks<=3">
							<image v-if="item.ranks==1" src="@/page_activity/static/No1_icon.png" class="No-icon"
								mode="">
							</image>
							<image v-else-if="item.ranks==2" src="@/page_activity/static/No2_icon.png" class="No-icon"
								mode="">
							</image>
							<image v-else-if="item.ranks==3" src="@/page_activity/static/No3_icon.png" class="No-icon"
								mode="">
							</image>
						</template>
						<text v-else class="No-text">{{item.ranks}}</text>
					</view>
					<view class="user-box flex-row-center">
						<view class="ava">
							<up-avatar :default-url="errImg" :src="item.avatar" mode="aspectFill" shape="circle"
								size="64rpx"></up-avatar>
						</view>
						<text class="name">{{item.real_name}}</text>
					</view>
				</view>
				<view class="flex-row-center">
					<text class="points points-box textRight">{{item.score}}</text>
					<!-- <view class="edit-box flex-center">
						<image src="@/static/user/edit_icon.png" class="edit_icon" mode=""></image>
					</view> -->
				</view>
			</view>
			<view class="view-more" @click="getMoreRanks">
				<up-loadmore :status="ranksInfo.status" />
			</view>
		</template>
		<view v-else class="not-list-view">
			<text class="text">当前赛事排名正在结算中，请稍后~</text>
		</view>
	</view>
	<up-modal :show="alterInfo.show" confirmColor="#7EDE9E" showCancelButton title="修改积分" @confirm="alterScore"
		@cancel="closeEdit">
		<view class="slot-content">
			<up-input type="number" v-model="alterInfo.score" :customStyle="{
				width: '362rpx',
				height: '68rpx',
				borderRadius: '8rpx',
				boxSizing: 'border-box',
				padding:'20rpx',
				border:'1rpx solid #191C1F'
				 }" color="#191C1F" @confirm="alterScore" confirmType="done">
			</up-input>
		</view>
	</up-modal>
</template>

<script setup>
	import {
		configInfoStore
	} from '@/stores/config.js';
	const {
		configInfo
	} = configInfoStore();
	const errImg = ref(computed(() => configInfo.user_default_avatar?.value));
	import {
		matchInfoStore
	} from '@/stores/match';
	const matchStore = matchInfoStore();
	const matchInfo = computed(() => matchStore.matchInfo);
	const ranksInfo = reactive({
		list: [],
		page: 1,
		status: 'loadmore'
	});
	const alterInfo = reactive({ //编辑对象
		score: 0,
		index: null,
		show: false,
		id: 0
	})
	onMounted(() => {
		console.log('结束组件加载了');
		ranksInfo.status = 'loadmore';
		ranksInfo.page = 1;
		ranksInfo.list = [];
		getMatchResult();
	});
	onPullDownRefresh(() => {
		console.log('结束得组件刷新了');
		if (matchInfo.value?.stepsIndex == 2) {
			ranksInfo.status = 'loadmore';
			ranksInfo.page = 1;
			ranksInfo.list = [];
			getMatchResult();
		}
	});
	const getMoreRanks = () => {
		if (ranksInfo.status == 'nomore' || ranksInfo.status == 'loading') return;
		ranksInfo.status = 'loading';
		setTimeout(() => {
			getMatchResult();
		}, 300);
	}
	const getMatchResult = async () => {
		const res = await $Api.match.getMatchResult({
			match_id: matchInfo.value.m_id,
			page: ranksInfo.page
		}, true);
		if (res.code == 1) {
			if (res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list;
				ranksInfo.list = [...ranksInfo.list, ...arr];
			}
			if (res.data.totalPage > ranksInfo.page) {
				ranksInfo.status = 'loadmore';
				ranksInfo.page++;
			} else {
				ranksInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	};
	const closeEdit = () => { //取消编辑
		alterInfo.show = false;
		alterInfo.score = 0;
		alterInfo.id = 0;
	};
	const alterScore = async () => { //修改分数
		const res = await $Api.match.alterPoint({
			match_id: matchInfo.value.m_id,
			id: alterInfo.id,
			score: alterInfo.score
		}, true)
		if (res.code == 1) {
			setTimeout(() => {
				uni.showToast({
					title: '录入成功'
				});
				setTimeout(() => {
					closeEdit();
					getMatchResult();
				}, 300)
			}, 300)
		} else {
			uni.$u.toast(res.msg);
		}
	};
	const changeEditIndex = (item, index) => { //切换编辑对象
		alterInfo.show = true; //关闭键盘
		alterInfo.score = item.score;
		alterInfo.id = item.id;
	}
	defineExpose({
		getMoreRanks
	})
</script>

<style lang="scss" scoped>
	.result-content {
		width: 710rpx;
		background: #222528;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 32rpx 24rpx;

		.textRight {
			text-align: right;
		}

		.No-box {
			width: 80rpx;
			text-align: center;
		}

		.user-box {
			margin-left: 58rpx;
		}

		.points-box {}

		.edit-box {
			width: 80rpx;
			text-align: center;
			margin-left: 58rpx;
		}

		.table-th {
			justify-content: space-between;

			.text {
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
				display: inline-block;
			}

		}

		.tbody-box {
			justify-content: space-between;
			margin-top: 52rpx;

			.No-icon {
				width: 42rpx;
				height: 50rpx;
			}

			.No-text {
				font-weight: bold;
				font-size: 34rpx;
				color: rgba(255, 255, 255, 0.87);
			}

			.ava {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.name {
				width: 180rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
				font-weight: bold;
				font-size: 34rpx;
				color: rgba(255, 255, 255, 0.87);
				margin-left: 16rpx;
			}

			.points {
				font-weight: 500;
				font-size: 30rpx;
				color: rgba(255, 255, 255, 0.87);
			}

			.edit_icon {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>